import React from 'react';
import { View, Text, Image, ScrollView } from 'react-native';

import styles from './style';
import Images from './../../constants/images';

function QueryCarPro() {
  return (
    <View style={styles.querySection}>
      <View style={styles.querySectionTitle}>
        <View style={styles.querySectionTitleL}>
          <View style={styles.querySectionVLine} />
          <Text style={styles.querySectionText}>汽车用品</Text>
        </View>
        <View style={styles.querySectionTitleR}>
          <Text>更多</Text>
        </View>
      </View>
      <View style={styles.querySectionContent}>
        <View style={styles.queryCarProContainer}>
          <ScrollView
            style={styles.queryCarProScroll}
            horizontal={true} // 横向
            showsHorizontalScrollIndicator={false}>
            <View style={styles.queryCarProItem}>
              <Image
                style={styles.queryCarProItemImage}
                source={Images.query_banner_01}
              />

              <View style={styles.queryCarProItemInfo}>
                <Text style={styles.queryCarProItemInfoName} numberOfLines={2}>
                  汽车前保险杠汽车前保险杠汽车前保险杠汽车前保险杠汽车前保险杠汽车前保险杠汽车前保险杠
                </Text>
                <Text style={styles.queryCarProItemInfoPrice}>¥565</Text>
              </View>
            </View>

            <View style={styles.queryCarProItem}>
              <Image
                style={styles.queryCarProItemImage}
                source={Images.query_banner_01}
              />

              <View style={styles.queryCarProItemInfo}>
                <Text style={styles.queryCarProItemInfoName} numberOfLines={2}>
                  汽车前保险杠汽车前保险杠汽车前保险杠汽车前保险杠汽车前保险杠汽车前保险杠汽车前保险杠
                </Text>
                <Text style={styles.queryCarProItemInfoPrice}>¥565</Text>
              </View>
            </View>

            <View style={styles.queryCarProItem}>
              <Image
                style={styles.queryCarProItemImage}
                source={Images.query_banner_01}
              />

              <View style={styles.queryCarProItemInfo}>
                <Text style={styles.queryCarProItemInfoName} numberOfLines={2}>
                  汽车前保险杠汽车前保险杠汽车前保险杠汽车前保险杠汽车前保险杠汽车前保险杠汽车前保险杠
                </Text>
                <Text style={styles.queryCarProItemInfoPrice}>¥565</Text>
              </View>
            </View>

            <View style={styles.queryCarProItem}>
              <Image
                style={styles.queryCarProItemImage}
                source={Images.query_banner_01}
              />

              <View style={styles.queryCarProItemInfo}>
                <Text style={styles.queryCarProItemInfoName} numberOfLines={2}>
                  汽车前保险杠汽车前保险杠汽车前保险杠汽车前保险杠汽车前保险杠汽车前保险杠汽车前保险杠
                </Text>
                <Text style={styles.queryCarProItemInfoPrice}>¥565</Text>
              </View>
            </View>
          </ScrollView>
        </View>
      </View>
    </View>
  );
}

export default QueryCarPro;
